<template>
  <div id="app">
    <!-- 区分登录页和主布局 -->
    <RouterView v-slot="{ Component }">
      <template v-if="Component">
        <component :is="Component" />
      </template>
    </RouterView>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 路由实例
const router = useRouter()

// 初始化检查登录状态
onMounted(() => {
  const isLogin = !!localStorage.getItem('token')
  const currentPath = router.currentRoute.value.path

  // 未登录且不在登录页时，重定向到登录页
  if (!isLogin && currentPath !== '/login') {
    router.replace('/login')
  }
})
</script>

<style lang="scss">
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: #333;
  background-color: #f5f7fa;
}

/* 修复路由切换时的闪烁问题 */
#app {
  min-height: 100vh;
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>